<!-- 测试报告 -->
<template>
	<div class="container">
		<div class="handle-box">
			<el-date-picker style="margin-right: 10px;" v-model="ArrTime" type="datetimerange"  @change="handleTime" size="small" range-separator="至" start-placeholder="请选择开始日期" end-placeholder="请选择结束日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
			<el-select v-model="query.openType"  placeholder="请选择开仓类型" class="handle-select mr10" size="small" clearable>
				<el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id"></el-option>
			</el-select>
			<el-select v-model="query.closeType" placeholder="请选择平仓类型" class="handle-select mr10" clearable size="small">
				<el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id"></el-option>
			</el-select>
			<el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">搜索</el-button>
			<el-button type="warning" icon="el-icon-download" size="small" @click="unload()">导出</el-button>
		</div>
		<div class="table_top">
			<el-link type="primary">总交易笔数：{{totalNum}}</el-link>
			<el-link type="success">总收益：{{totalRevenue}}</el-link>
		</div>
		<el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
			<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
			<el-table-column prop="symbol" sortable label="品种"></el-table-column>
			<el-table-column prop="open_time" sortable label="开仓时间" :formatter="formatter" width="150"></el-table-column>
			<el-table-column prop="open_price" sortable label="开仓价格(元)" width="120"></el-table-column>
			<el-table-column prop="open_type" sortable label="开仓类型" width="150"></el-table-column>
			<el-table-column prop="close_time" sortable label="平仓时间" :formatter="formatter1" width="150"></el-table-column>
			<el-table-column prop="close_price" sortable label="平仓价格(元)"  width="120"></el-table-column>
			<el-table-column prop="close_type" sortable label="平仓类型" width="120"></el-table-column>
			<el-table-column prop="net_pl" sortable label="收益"></el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination
				v-if="paginationShow"
				background
				layout="total,sizes,prev,pager,next"
				:current-page="query.pageIndex"
				:page-size="query.pageSize"
				:total="pageTotal"
				@current-change="handlePageChange"
				@size-change="handleSizeChange"
				:page-sizes="[10, 20, 50, 100]"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import { reportListAPI } from '@/api/index';
export default {
	name: 'role',
	props: {
		Infoitem: String
	},
	data() {
		return {
			loading: false,
			tableData: [],
			pageTotal: 0,
			totalNum:0,
			totalRevenue:0,
			ArrTime:[],
			query: {
				pageNum: 1,
				pageSize: 10,
				openType:'',
				closeType:'',
				startTime:'',
				endTime:'',
			},
			options1:[{
				id:'BUY_OPEN_AI',
				name:'BUY_OPEN_AI'
			},{
				id:'BUY_OPEN_MACD',
				name:'BUY_OPEN_MACD'
			},{
				id:'BUY_OPEN',
				name:'BUY_OPEN'
			}],
			options2:[{
				id:'EXIT',
				name:'EXIT'
			},{
				id:'STOP',
				name:'STOP'
			},{
				id:'DAY_CLOSE',
				name:'DAY_CLOSE'
			}],
			paginationShow:true
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		// 获取表格数据 
		getData() {
			this.loading = true;
			this.query.testingId = this.Infoitem
			reportListAPI(this.query).then(res => {
				if (res.status == 200) {
					this.tableData = res.data;
					this.pageTotal = res.total;
					this.totalNum  = res.total
					this.totalRevenue = res.Num || 0
					this.loading = false;
				} else {
					this.loading = false;
				}
			});
		},
		// 导出策略测试
		unload(){
			window.location.href = '/api/index.php/Home/Index/downstrategyreport?testingId=' + this.Infoitem + 
			'&openType=' + this.query.openType + '&closeType=' + this.query.closeType + '&startTime=' + this.query.startTime 
			+ '&endTime=' + this.query.endTime
		},
		formatter(row){
			return this.$moment(row.open_time * 1000).format('YYYY-MM-DD HH:mm:ss')
		},
		formatter1(row){
			return this.$moment(row.close_time * 1000).format('YYYY-MM-DD HH:mm:ss')
		},
		// 查询
		handleSearch() {
			this.query.pageNum = 1;
			this.getData();
		},
		// 时间选择
		handleTime(data){
			if(data != null){
				this.query.startTime = new Date(data[0]).getTime() / 1000 ;
				this.query.endTime = new Date(data[1]).getTime() / 1000 ;
			}else{
				this.query.startTime = ""
				this.query.endTime = ""
				this.query.pageNum = 1;
				this.getData();
			}
		},
		// 分页导航
		handlePageChange(val) {
			this.query.pageNum = val;
			this.getData();
		},
		handleSizeChange(val){
			this.query.pageNum = 1
			this.query.pageSize = val;
			this.getData()
		},
	}
};
</script>

<style scoped>
/deep/.el-transfer-panel__item.el-checkbox {
	width: 100px;
}
/deep/.el-transfer-panel {
	width: 240px;
}
.table_top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 240px;
	height: 45px;
	
}
.meun{
	display: flex;align-items: center;justify-content: center;
}
.meun_list{
	width: 100%; padding: 0 15px;
}
.red {
	color: #67C23A !important;
}
.red1{
	color: #F56C6C !important;
}
.check1{
	font-weight: 600;
	margin-bottom: 15px;
}
.line-check{
	display: inline-block; 
	margin-left: 25px;
	margin-bottom: 20px;
}
.mb8 {
	margin-bottom: 10px;
}
.handle-box {
	/* margin-bottom: 20px; */
}

.handle-select {
	width: 200px;
}

.handle-input {
	width: 200px;
	display: inline-block;
}
.table {
	width: 100%;
	font-size: 13px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
